<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<title></title>
		<!--/阿里巴巴矢量图标库:https://www.iconfont.cn/*
			  	直接当做字体来使用
			  	图片截下来会失真，但是字体不会
			 -->
		<!--引入图标-->
		<link rel="stylesheet" href="font_3260354_owypszl23lg/iconfont.css">
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				width: 955px;
				height: 1420px;
				margin: 0 auto;
				background: yellow;
				display: flex;
				flex-direction: column;
			}
			header {
				height: 124px;
				background: #232939;
				display: flex;
				color: white;
			}
			/*header设置*/
			header i {
				width: 118px;
				height: 124px;
				line-height: 124px;
				text-align: center;
			}
			header .iconfont {
				font-size: 48px;
			}
			header span {
				height: 124px;
				line-height: 124px;
				flex: 1;
				font-size: 40px;
			}
			/*footer设置*/
			footer {
				height: 124px;
				background: gray;
				display: flex;
			}
			footer div {
				flex: 1;
				/*border: 1px solid red;
				box-sizing: border-box;*/
				display: flex;
				flex-direction: column;
				justify-content: center;
				background: white;
				color: #acadaf;
			}
			footer div i {
				height: 66px;
				line-break: 66px;
				text-align: center;
			}
			.icon-zhifubao,.icon-koubei,.icon-qinyou,.icon-wode {
				font-size: 58px;
			}
			footer div:hover {
				color: #06a9ee;
			}
			footer div span {
				height: 36px;
				line-break: 36px;
				text-align: center;
				font-size: 28px;
			}
			
			section {
				flex: 1;
				background: #f4f5f9;
			}
			.main {
				display: flex;
				height: 278px;
				background: #242a3a;
				justify-content: space-around;
				align-items: center;
			}
			.main div {
				width: 120px;
				height: 168px;
				/*background: red;*/
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				color: white;
			}
			.main div .icon-saoyisao,.icon-fukuan,.icon-kaquanyingxiao,.icon-wangluo {
				font-size: 110px;
				text-align: center;
			}
			.main div span {
				font-size: 32px;
				text-align: center;
			}
			
			.list {
				display: flex;
				flex-wrap: wrap;
				background: white;
			}
			.list div {
				width: 25%;
				height: 208px;
				border: 1px solid gray;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			.list div i {
				height: 77px;
				line-height: 77px;
				text-align: center;
				font-size: 55px;
			}
			.list div span {
				height: 61px;
				line-height: 61px;
				text-align: center;
				font-size: 30px;
			}
			.icon-xinyongka {
				color: #fbb458;
			}
			img {
				display: block;
				height: 220px;
				width: 100%;
				background: red;
				margin-top: 25px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<header>
				<i class="iconfont icon-zhangdan"></i>
				<span>账单</span>
				<i class="iconfont icon-sousuo"></i>
				<i class="iconfont icon-yonghuxinxi"></i>
				<i class="iconfont icon-tianjia"></i>
			</header>
			<section>
				<div class="main">
					<div >
						<i class="iconfont icon-saoyisao"></i>
						<span>扫一扫</span>
					</div>
					<div >
						<i class="iconfont icon-fukuan"></i>
						<span>付款</span>
					</div>
					<div >
						<i class="iconfont icon-kaquanyingxiao"></i>
						<span>卡券</span>
					</div>
					<div >
						<i class="iconfont icon-wangluo"></i>
						<span>国际</span>
					</div>
				</div>
				
				<div class="list">
					<div>
						<i class="iconfont icon-xinyongka"></i>
						<span>信用卡还款</span>
					</div>
					<div>
						<i class="iconfont icon-xinyongka"></i>
						<span>信用卡还款</span>
					</div>
					<div>
						<i class="iconfont icon-xinyongka"></i>
						<span>信用卡还款</span>
					</div>
					<div><i class="iconfont icon-xinyongka"></i>
						<span>信用卡还款</span>
					</div>
					<div>
						<i class="iconfont icon-xinyongka"></i>
						<span>信用卡还款</span>
					</div>
					<div>
						<i class="iconfont icon-xinyongka"></i>
						<span>信用卡还款</span>
					</div>
					<div>
						<i class="iconfont icon-xinyongka"></i>
						<span>信用卡还款</span>
					</div>
					<div>
						<i class="iconfont icon-xinyongka"></i>
						<span>信用卡还款</span>
					</div>
					<div>
						<i class="iconfont icon-xinyongka"></i>
						<span>信用卡还款</span>
					</div>
					<div><i class="iconfont icon-xinyongka"></i>
						<span>信用卡还款</span>
					</div>
					<div>
						<i class="iconfont icon-xinyongka"></i>
						<span>信用卡还款</span>
					</div>
					<div>
						<i class="iconfont icon-xinyongka"></i>
						<span>信用卡还款</span>
					</div>
				</div>
			
				<div class="pic">
					<img src="../../99-大案例/01-安利首页/img/banner.jpeg" />
				</div>
			</section>
			
			<footer>
				<div>
					<i class="iconfont icon-zhifubao"></i>
					<span>支付宝</span>
				</div>
				<div>
					<i class="iconfont icon-koubei"></i>
					<span>口碑</span>
				</div>
				<div>
					<i class="iconfont icon-qinyou"></i>
					<span>朋友</span>
				</div>
				<div>
					<i class="iconfont icon-wode"></i>
					<span>我的</span>
				</div>
			</footer>
		</div>
	</body>
</html>
